<template>
  <div class="product-card" @click="handleClick">
    <div class="card-image-wrapper">
      <el-image 
        :src="product.coverImage" 
        :alt="product.name"
        class="product-image"
        fit="cover"
      >
        <template #error>
          <div class="image-error">
            <i class="el-icon-picture-outline"></i>
          </div>
        </template>
      </el-image>
      <div class="card-overlay">
        <div class="price-tag">
          ¥{{ product.price }}
        </div>
      </div>
    </div>
    <div class="card-content">
      <h3 class="product-name">{{ product.name }}</h3>
      <div class="product-price">¥{{ product.price }}</div>
      <p class="product-category">{{ product.categoryName || '非遗文创' }}</p>
      <div class="product-description" v-if="product.intro">
        {{ product.intro }}
      </div>
      <div class="product-actions">
        <el-button 
          type="primary" 
          size="small" 
          @click.stop="handleAddToCart"
          class="add-to-cart-btn"
        >
          加入购物车
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElImage, ElButton } from 'element-plus'
import { useRouter } from 'vue-router'

const props = defineProps({
  product: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['addToCart'])

const router = useRouter()

const handleClick = () => {
  // 跳转到商品详情页
  router.push({
    path: "/front/productDetail",
    query: {
      id: props.product.id,
    },
  })
}

const handleAddToCart = (event) => {
  event.stopPropagation()
  emit('addToCart', props.product)
}
</script>

<style lang="scss" scoped>
.product-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  
  &:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: #3498db;
    
    .card-overlay {
      opacity: 1;
    }
    
    .product-image {
      transform: scale(1.05);
    }
  }
  
  .card-image-wrapper {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    
    .product-image {
      width: 100%;
      height: 100%;
      transition: transform 0.3s ease;
    }
    
    .card-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, transparent 50%, rgba(0,0,0,0.3) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: flex-start;
      justify-content: flex-end;
      padding: 12px;
      
      .price-tag {
        background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%);
        color: white;
        padding: 6px 12px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
      }
    }
  }
  
  .card-content {
    padding: 20px;
    
    .product-name {
      font-size: 16px;
      font-weight: 600;
      color: #2c3e50;
      margin: 0 0 4px 0;
      line-height: 1.4;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .product-price {
      font-size: 18px;
      font-weight: 700;
      color: #e74c3c;
      margin: 0 0 8px 0;
    }
    
    .product-category {
      font-size: 13px;
      color: #3498db;
      margin: 0 0 12px 0;
      font-weight: 500;
      background: rgba(52, 152, 219, 0.1);
      padding: 4px 8px;
      border-radius: 12px;
      display: inline-block;
    }
    
    .product-description {
      font-size: 12px;
      color: #7f8c8d;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 15px;
    }
    
    .product-actions {
      .add-to-cart-btn {
        width: 100%;
      }
    }
  }
}

.image-error {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  color: #bdc3c7;
  font-size: 32px;
}

@media (max-width: 768px) {
  .product-card {
    .card-image-wrapper {
      height: 160px;
    }
    
    .card-content {
      padding: 16px;
      
      .product-name {
        font-size: 15px;
      }
      
      .product-price {
        font-size: 16px;
        font-weight: 700;
        color: #e74c3c;
        margin: 0 0 6px 0;
      }
      
      .product-category {
        font-size: 12px;
      }
      
      .product-description {
        font-size: 11px;
      }
    }
  }
}
</style>